<template>
    <div>
        <h1>App</h1>
        <!-- 因为在main.js中使用了store配置项，所以这里可以直接拿到值 -->
        <p>count:{{$store.state.count}}</p>
        <p>count:{{count}}</p>
        <p>num:{{num}}</p>
    </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    name:"App",
    mounted() {
        console.log(this,"app");

        //mapState的使用,参数是一个数组,数组内是我们要去store拿的值
        //mapState返回一个对象,对象内部其实就是读取值的对应的计算属性的方法
        const result = mapState(["count", "num"]);
        //得到的是一个对象，里面是state的内容
        console.log(result);
    },
    //方式一
    // computed:{
    //     count(){
    //         return this.$store.state.count
    //     },
    //     num(){
    //         return this.$store.state.num
    //     }
    // }

    //方式二，简洁方式
    computed:{
        ...mapState(["count","num"])
    }
}
</script>

<style>

</style>